import { ref, nextTick, computed } from 'vue'
import {
    editSkuGoods,
    delSkuGoods,
    addSkuValue,
    editSkuValue,
    delSkuValue,
    addSkuGoods,
    chooseAndSetGoodsSkusCard
} from '@/api/goods'
// 把商品的多规格全部放在这里进行响应式

// 当前商品ID
export const goodsId = ref(0)

// 规格选项列表
export const sku_card_list = ref([])
export const sku_list = ref([])
// 初始化规格选项列表
export function initSkuCardList(d) {
    // 把规格选项列表值保存起来 
    // 赋值一个 text属性值为name 目的就是修改的时候如果修改失败就给回原来的值
    sku_card_list.value = d.goodsSkusCard.map(o => {
        o.text = o.name
        o.goodsSkusCardValue.map(v => {
            v.text = v.value || "属性值"
            return v
        })
        return o
    })
}

// 初始化规格的值 添加 修改 删除
export function initSkusCardItem(id) {
    // 通过id拿到当前规格的规格值
    const item = sku_card_list.value.find(o => o.id === id)
    let inputVisible = ref(false)
    const InputRef = ref()
    let inputValue = ref('')
    const showInput = () => {
        inputVisible.value = true
        nextTick(() => {
            InputRef.value.input.focus()
        })
    }
    // 添加
    const handleInputConfirm = () => {
        // inputVisible.value = false
        if (!inputValue.value) {
            inputVisible.value = false
            return
        }
        // 添加skusvalue
        addSkuValue({
            goods_skus_card_id: id, //规格ID
            name: item.name, //规格名称
            order: 50, //排序
            value: inputValue.value //规格选项名称
        }).then(res => {
            if (res.status == 200) {
                item.goodsSkusCardValue.push({
                    ...res.data,
                    text: res.data.value
                })
                inputValue.value = ''
                inputVisible.value = false
            }
        })
    }
    // 删除
    const handleClose = (tag) => {
        delSkuValue(tag.id).then(res => {
            if (res.data) {

                let i = item.goodsSkusCardValue.findIndex(o => o.id == tag.id)
                item.goodsSkusCardValue.splice(i, 1)
            }
        })
    }
    return {
        item,
        inputVisible,
        showInput,
        handleInputConfirm,
        InputRef,
        inputValue,
        handleClose
    }
}

//  修改规格选项 text
export function skuTextChang(item) {
    editSkuGoods(item.id, {
        "goods_id": item.goods_id, //商品ID
        "name": item.text, //规格名称
        order: item.order, //排序
        type: 0 //规格类型 0文字
    }).then(res => {
        item.name = item.text
    }).catch(err => {
        item.text = item.name
    })
}

//  删除规格选项 
export function dekSku(item) {
    delSkuGoods(item.id).then(res => {
        if (res.data) {
            let i = sku_card_list.value.findIndex(o => o.id == item.id)
            if (i !== -1) {
                sku_card_list.value.splice(i, 1)
            }
        }
    })
}

// 添加规格选项
export function addSkuCardEvent(item) {
    // 添加规格 addSkuGoods
    addSkuGoods({
        goods_id: goodsId.value, //商品ID
        name: "规格名称", //规格名称
        order: 50, //排序
        type: 0 //规格类型 0文字
    }).then(res => {
        if (res.status === 200) {
            sku_card_list.value.push({
                ...res.data,
                text: res.data.name,
                goodsSkusCardValue: []
            })
        }
    })
}

// 添加规格
export function handleChooseSetGoodsSkusCard(id, data) {
    // 发送请求
    // 添加规格

    let item = sku_card_list.value.find(o => o.id === id)
    chooseAndSetGoodsSkusCard(id, data).then(res => {
        if (res.status === 200) {
            item.name = item.text = res.data.goods_skus_card.name
            item.goodsSkusCardValue = res.data.goods_skus_card_value.map(o => {
                o.text = o.value || "属性值"
                return o
            })
        }
    })
}